<!--
  产品
 -->

<template>
  <BaseMainSlot :nowpage="nowpage">
    <template v-slot:farmtypeselectslot>
      <SelectButton v-if="nowpage === 2" @topitemtype="topitemtype" />
      <el-button v-if="nowpage === 2" class="button" size="mini" round @click="ret">
        返回
      </el-button>
    </template>
    <!-- <template v-sklot:searchbox> </template> -->
    <template v-slot:content>
      <div v-if="nowpage === 1" class="search-box">
        <div class="search">
          <div class="label-input mr-20">
            <!-- <span class="label label-80">批次名称:</span> -->
            <div class="input">
              <!-- <el-input v-model="batchName" clearable placeholder="请输入批次名称" /> -->
              <el-select v-model="batchName" class="input-select" filterable clearable placeholder="请选择批次名称" @change="getTableDataList()">
                <el-option
                  v-for="(batchitem,batchindex) in batchList"
                  :key="batchindex"
                  :label="batchitem.batchName"
                  :value="batchitem.batchName"
                />
              </el-select>
            </div>
          </div>
          <!-- <div class=" ml-20"> -->
          <img class="ml-20" src="~@/assets/action-bar-icon/search.png" @click="search" />
        <!-- </div> -->
        </div>
        <div>
          <img class="ml-20 Screening" src="~@/assets/trace-source-manage/Screening.png" @click="search" />
        </div>
      </div>
      <div v-if="nowpage === 1 && tableData.length > 0" class="content">
        <el-card v-for="item in tableData" :key="item.batchNo" class="box-card w50p">
          <!-- <el-card v-for="o in 111" :key="o" class="box-card w50p"> -->
          <!-- <div  class="text item"> -->
          <el-col :span="6" class="left">
            <el-row :gutter="18" class="left-top">
              <img v-if="item.varietyPicture" :src="'data:image/png;base64,' + item.varietyPicture" alt="" />
              <img v-else-if="!item.varietyPicture" src="https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png" alt="默认图片" />
            </el-row>
            <el-row :gutter="6" class="left-bottom">
              <!-- <span>批次名称</span> -->
              <span>{{ item.batchName }}</span>
            </el-row>
          </el-col>
          <el-col :span="12" class="contents">
            <ul>
              <li>
                <i class="el-icon-c-scale-to-original"></i>
                <span> 种养品种: </span>
                <!-- <b>红美人</b> -->
                <b>{{ item.varietyName }}</b>
              </li>
              <li>
                <i class="el-icon-time"></i>
                <span> 种养时间: </span>
                <!-- <b>2020年2月12日</b> -->
                <b>{{ item.assetDate }}</b>
              </li>
              <li>
                <i class="el-icon-office-building"></i>
                <span> 种养主体: </span>
                <b>农场</b>
                <b>{{ item.organizationName }}</b>
              </li>
              <li>
                <i class="el-icon-location-outline"></i>
                <span> 种养地址: </span>
                <b>{{ item.plantAddress }} </b>
              </li>
            </ul>
          </el-col>
          <el-col :span="6" class="right">
            <el-row :gutter="18" class="right-top">
              <p></p>
              <vue-qr
                :text="item.downloadData.url"
                :margin="10"
                color-dark="#000"
                color-light="#fff"
                :dot-scale="1"
                :logo-scale="0.2"
                :size="200"
                :logo-src="item.downloadData.icon"
              />
            </el-row>
            <el-row :gutter="6" class="right-bottom">
              <div class="sowing-right-line-one">扫码溯源</div>
            </el-row>
          </el-col>
          <!-- </div> -->
          <div class="disnone">
            <div class="disblak">
              <i class="left"></i>
              <el-button
                @click="seeInformation(item, item.varietyPicture)"
              >点击查看溯源信息
              </el-button>
              <i class="right"></i>
            </div>
          </div>
        </el-card>
      </div>
      <div v-if="nowpage === 1 && tableData.length === 0" class="content" style="align-content: center;justify-content: center;">
        <h1>暂无数据</h1>
      </div>
      <!-- </div> -->
      <ProductTraceability
        v-if="nowpage === 2"
        ref="prouductmessage"
        :batch-from="batchFrom"
        :imgurls="imgUrl"
      />
    </template>
    <template v-slot:pagination>
      <Pagination
        v-if="nowpage === 1"
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import SelectButton from "@/components/selectbutton/index.vue";
import vueQr from 'vue-qr'
import ProductTraceability from "../components/processingTraceability"
// import { deepClone } from "@/utils";
import { getToken } from '@/utils/auth';
import batchreq from "@/api/trace-source-web/common-production/index"
import BaseMainSlot from "@/components/BaseMainSlot/kong.vue";
// import ProductTrace from "@/api/trace-source-web//trace-source-message/index";
import Pagination from "@/components/Pagination/index.vue"
import { mymixin } from "@/utils/mixin";

export default {
  components: { BaseMainSlot, SelectButton, ProductTraceability, Pagination, vueQr },
  mixins: [mymixin],
  data() {
    return { gotop: false, nowpage: 1, topitemtypeid: 1, batchName: undefined, batchList: [], batchNo: '', imgUrl: ''
      // 二维码数据
      // downloadData: {
      //   url: '${this.$webSerUrl}source/#/?batchNo=3&databaseName="DB_TDW1_CXXC"',
      //   icon: require('@/assets/trace-source-manage/yezi.png')
      //   // icon: 'https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png'
      // }
    };
  },
  watch: {},
  created() {
    this.getTableDataList();
  },
  mounted() {
    this.getbatchselect()
    window.addEventListener('scroll', this.load, { passive: false });
    // console.log(window.addEventListener)
  },
  destroyed() {
    window.removeEventListener('scroll', this.load, false);
  },
  methods: {
    // // 无限滚动加载
    // load() {
    //   let vm = this;
    //   console.log("1")
    //   if (getScrollTop() + getWindowHeight() >= getScrollHeight()) {
    //     if (vm.currentPage < vm.totalPages) { // 先判断下一页是否有数据
    //       vm.currentPage = vm.currentPage + 1; // 查询条件的页码+1
    //       vm.getTableDataList(); // 拉取接口数据
    //     } else {
    //     // 到底了
    //       this.$message.warning("到底了")
    //     }
    //   }
    // },
    ret() {
      this.nowpage = 1;
    },
    // 获取点击的分页index
    topitemtype(e) {
      this.topitemtypeid = e;
      // 获取表格数据
      this.getTableDataList();
    },
    seeInformation(val, img) {
      this.nowpage = 2;
      this.batchNo = val.batchNo;
      this.batchFrom = val;
      this.imgUrl = img;
    },
    getTableDataList() {
      // let params = {
      //   page: this.currentPage,
      //   size: this.pageSize,
      //   entity: {
      //     batchName: this.batchName,
      //     farmingTypeNo: this.farmingTypeNo,
      //     organizationNo: sessionStorage.organizationNo
      //   }
      // };
      // batchreq.getTraceabilityList(params).then(res => {
      // let data = res.data;
      // this.totalSize = data.totalElements;
      // this.tableData = data.content;
      this.tableData = [];
      this.databaseName = getToken("databaseName");
      if (this.tableData) {
        this.tableData.forEach(item => {
          // let zhurl = `${this.$webSerUrl}traceSo/#/?batchNo=${this.batchNo}&databaseName=${this.databaseName}`
          let downloadData = {
            url: `${this.$webSerUrl}mateFarmTraceSource/#/pages/production-trace/production-traceone?batchNo=${item.batchNo}&databaseName=${this.databaseName}&batchType=PRODUCTION`,
            icon: require("@/assets/trace-source-manage/yezi.png")
          };
          this.$set(item, "downloadData", downloadData);
        });
      }
      // this.tableData.sort(function(a, b) {
      //   return b.assetDate < a.assetDate ? -1 : 1
      // })
      // if (this.currentPage === 1) { // 第一页就直接赋值
      //   this.totalPages = data.totalPages; // 将后台的总页数赋值
      //   this.tableData = data.content;
      // } else { // 将后面页码的数据和之前的数据拼合
      //   for (let i in data.content) {
      //     this.tableData.push(data.content[i]);
      //   }
      // }
      // console.log(this.tableData)
      // });
    },
    // 获取批次下拉数据
    getbatchselect() {
      batchreq.querybylist().then(res => {
        this.batchList = [];
        // this.batchList = res.data;
        // console.log(this.batchList)
      });
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    screening() {
      this.dialogFormVisible = true
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
@import "~@/styles/trace.scss";
</style>
